$(function(){
    // 去掉所以a的下户线
    $('a').css({
        textDecoration:'none'
    })
    $('.bd1copy a').attr('href',"list.html").hover(function(){
        $(this).css({color:'skyblue'})
    },function(){
        $(this).css({color:'black'})
    })
    // 页面顶部的交互
    $('.top .tp1 li:eq(0) a').hover(function(){
        $(this).css({color:'skyblue'})
    },function(){
        $(this).css({color:'#666666'})
    })
    $('.top .tp1 li:eq(3) a').hover(function(){
        $(this).css({color:'red'})
    },function(){
        $(this).css({color:'#666666'})
    })
    $('.top .tp2 li a').hover(function(){
        $(this).css({color:'skyblue'})
    },function(){
        $(this).css({color:'#666666'})
    })
    //
    $('.top .tp1 li:eq(2)').hover(function(){
        $(this).children('img').css({
            transform:"rotate(180deg)"
        });
        $(this).children('.lid1').css({
            display:'block',
            zIndex:'1'
        });
    },function(){
        $(this).children('img').css({
            transform:"rotate(0deg)"
        });
        $(this).children('.lid1').css({
            display:'none'
        });
    })
    //
    $('.top .tp1 li:eq(2) .lid1 p span:eq(0)').click(function(){
        $('.top .tp1 li:eq(2) .lid1 .lid11').css({
            display:'block'
        });
        $('.top .tp1 li:eq(2) .lid1 .lid12').css({
            display:'none'
        });
    })
    $('.top .tp1 li:eq(2) .lid1 p span:eq(1)').click(function(){
        $('.top .tp1 li:eq(2) .lid1 .lid12').css({
            display:'block'
        });
        $('.top .tp1 li:eq(2) .lid1 .lid11').css({
            display:'none'
        });
    })
    //我的
    $('.top .tp2 li:eq(3)').hover(function(){
        $(this).children('b').css({
            transform:"rotate(180deg) translateY(4px)"
        });
        $(this).children('ul').css({
            display:'block',
            zIndex:'1'
        });
    },function(){
        $(this).children('b').css({
            transform:"rotate(0deg)"
        });
        $(this).children('ul').css({
            display:'none'
        });
    })
    // 收藏
    $('.top .tp2 .nanshou').hover(function(){
        $(this).children('b').css({
            transform:"rotate(180deg) translateY(4px)",
            // 
        });
        $(this).children('ul').css({
            display:'block',
            zIndex:'1'
        });
    },function(){
        $(this).children('b').css({
            transform:"rotate(0deg)"
        });
        $(this).children('ul').css({
            display:'none'
        });
    })
    //二维码
    $('.top .tp2 .nanshou2').hover(function(){
        $(this).children('img').css({
            display:'block',
            zIndex:'1'
        });
    },function(){
        $(this).children('img').css({
            display:'none'
        });
    })


    // 搜搜
    $('.search .sd2 ul a').hover(function(){
        $(this).css({
            color:'black'
        })
    },function(){
        $(this).css({
            color:'#666666'
        })
    })
    //获取购物车信息
    var val = JSON.parse(localStorage.getItem('id'));
    var cart = function(){
        if(val){
            $('.tp2 li').eq(0).html('');
            $('.tp2 li').eq(1).html('');
        }
        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
            id: val
        }, data => {
            if(data.data){
                var news=data.data;
                var str='';
                var number1=0;
                for(var item=0;item<news.length;item++){
                    str+=`
                        <div>
                            <input type="checkbox" name="" id="btn">
                            <a href="detail.html?pid=${news[item].pid}"   target="_blank"><img src="${news[item].pimg}" alt=""></a>
                            <span>介绍${news[item].desc}</span>
                            <span class="number">
                                <span class="minus" data-id='${news[item].pid}'>-</span>
                                <span class="text">${news[item].pnum}</span>
                                <span class="add" data-id='${news[item].pid}'>+</span><br>
                                有货
                            </span>
                            <span class='broder'>
                                总价:<span class='pertotalprice'>${news[item].pprice*news[item].pnum}</span><br>
                                单价:<span>${news[item].pprice}</span>
                            </span>
                            <span><a href="#">[收藏]</a></span>
                            <span class='delete' data-id='${news[item].pid}'>[删除]</span>
                        </div>
                    `;
                    number1= +number1 +`${+news[item].pprice*news[item].pnum}`;
                }
                $('.carnum .cnd3').html(str);
                // 全选按钮
                var select=  function(){
                    $('.cnd4 input').click(function(){
                        if($(this).prop("checked")){
                            $(".cnd3 input").prop("checked",$(this).prop("checked"))
                            // 总价    
                            var as =0;
                            $('.cnd3 .pertotalprice').each(function(){
                                as = +as/1 + +$(this).html();
                            })
                            $('.cnd4 .c442').html(as);
                        }else{
                            $(".cnd3 input").prop("checked",$(this).prop("checked"))
                            $('.cnd4 .c442').html(0);
                        }
                    })
                    // 单个按钮
                    // select();
                    for(let n=0;n<$(".cnd3 input").length;n++){
                        $(".cnd3 input").eq(n).click(function(){
                            var count =0 ;
                            var as2 =0;
                            for(let m=0;m<$(".cnd3 input").length;m++){
                                if($(".cnd3 input").eq(m).prop('checked')){
                                    count++;
    
                                    // 价格
                                    as2 = +as2 +  +$(".cnd3 input").eq(m).siblings('.broder').children('.pertotalprice').html();
                                    // select()
                                    $('.cnd4 .c442').html(as2);
                                }
                            }
                            // console.log(count);
                            //只有单个选择都被选 全选框才会选
                            number();
                            if(count==$(".cnd3 input").length){
                                $(".cnd4 input").prop("checked",true)
                            }else{
                                $(".cnd4 input").prop("checked",false)
                            }
                            if(count==0){
                                $('.cnd4 .c442').html(0);
                            }
                        })
                    }
                }
                select();

                //数量减一
                $('.cnd3 div .number .minus').click(function(){
                    var id1 = $(this).attr('data-id')
                    var aa=$(this).siblings('.text').html() ;
                    if(aa==1){
                        alert('商品数量至少一件哦');
                        return;
                    }
                    aa -=1;
                    $(this).siblings('.text').html(aa);

                    $.get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
                        uid: val,
                        pid: id1,
                        pnum: -1
                    }, data => {
                        cart();
                        number();
                        select();
                    }) 
                })
                //数量加一
                $('.cnd3 div .number .add').click(function(){
                    var id2 = $(this).attr('data-id')
                    var bb=$(this).siblings('.text').html() ;
                    bb = +bb + 1;
                    $(this).siblings('.text').html(bb);

                    $.get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
                        uid: val,
                        pid: id2,
                        pnum: 1
                    }, data => {
                        cart();
                        number();
                    }) 
                })
                // 删除商品
                $('.cnd3 div .delete').click(function(){
                    var id3 = $(this).attr('data-id')
                    $(this).siblings('input').prop('checked',false);
                    $(this).parent().remove();
                    $.get("http://jx.xuzhixiang.top/ap/api/cart-delete.php", {
                        uid: val,
                        pid: id3,
                    }, data => {
                        number();
                        var gg =0;
                        $('.cnd3 .pertotalprice').each(function(){
                            gg = +gg +  +$(this).html();
                        })
                        $('.cnd4 .c442').html(gg);
                    }) 
                })
            }
        })
    }
    cart();
    
    //获取购物车商品总数量
    var number =function(){
        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
            id: val
        }, data => {
            if(data.data){
                var news=data.data;
                var str2='';
                for(var item=0;item<news.length;item++){
                    str2 = +str2 + +`${news[item].pnum}`;
                }
                $('.top .tp2l1 .tp2l11').html(str2);
                $('.aside .ad2 .adp1').html(str2).css({color:'white'});
                $('.ctd1 .allnumber').html(str2).css({color:'red'});
            }
        })
        //侧边栏
        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
            id: val
        }, data => {
            if(data.data){
                var news=data.data;
                var str='';
                for(var item=0;item<news.length;item++){
                    str+=`
                    <div>
                        <a href="detail.html?id=${news[item].pid}"  target="_blank"><img src="${news[item].pimg}" alt=""></a>
                        <p>标题：${news[item].pname}</p>
                        <p>价格：${news[item].pprice}</p>
                        <p>数量：${news[item].pnum}</p>
                    </div>
                    `;
                }
                $('.ad21').html(str);
            }
            $('.ad21').css({display:'none'});
            $('.ad2').hover(function(){
                $('.ad21').css({display:'block'});
            },function(){
                $('.ad21').css({display:'none'});
            })
        })
    } 
    number();
    //多余商品展示
    $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
        uid: val
    }, data => {
        console.log(data);
        if(data.data){
            var news=data.data;
            var str3='';
            for(var item=0;item<news.length;item++){
                str3 +=`
                <div>
                    <a href="detail.html?id=${news[item].pid}"  target="_blank"><img src="${news[item].pimg}" alt=""></a>
                    <p>标题：${news[item].pname}</p>
                    <p>价格：${news[item].pprice}</p>
                    <p>描述：${news[item].pdesc}</p>
                </div>
                `;
            }
            $('.toshowmorelist').html(str3);
        }
    })
})